<template>
<div class="father">
        <div class="back" @click="push">
        <img src="@/assets/img/返回.png" alt="" />
        <span style="font-size:35px;">批改作业</span>
      </div>
    <div class="son01">
         <h3 style="font-size:26px">学生姓名：{{taskManager.studentName}}</h3>
    <div style="margin-top: 30px;">
        <p class="biaoti">作业题目：
            <span>{{taskManager.taskName}}</span>
        </p>
        <div class="daan">作业答案：
            <div v-html="taskManager.taskTxt "></div>
        </div>
       
    </div>
    <div>
        <el-form :model="pingyu" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="score"
    :rules="[
      { required: true, message: '评分不能为空'},
      { type: 'number', message: '评分必须为数字值'}
    ]"
  >
    <el-input v-model.number="pingyu.score" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
        评分：<el-input v-model="pingyu.score" placeholder="请输入评分" style="width: 100px"></el-input> <br/>
        评语：<el-input v-model="pingyu.comment" placeholder="请输入评语"></el-input>
    </div>
    <button class="submit-btn" @click="handleSubmit">提交</button>
    </div>
</div>
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue'
// 引入路由
import { useRouter, useRoute } from 'vue-router'
import  {selecttaskManagerByid} from "@/api/teacher/taskManager.js";

// 创建路由实例
const router = useRouter()
// 获取当前路由对象
const route = useRoute()
//返回上一页
const push = () => {
  router.push("/class/homework");
};
//查询的信息对象
const taskManager=ref({})
const selectOne=()=>{
    selecttaskManagerByid(9).then(res=>{
        console.log(res.data)
        taskManager.value=res.data;
    })
}
//==================================
const pingyu=ref({})

const numberValidateFormRef = ref(null);
onMounted(()=>{
    console.log(route.query.userId)
    selectOne();
})
</script>


<style lang='scss' scoped>
$fz-base: 16px;
$fz-title: 26px;
$fz-small: 14px;
$color-primary: #409EFF;
$color-secondary: #606266;
$color-background: #FFFFFF;
$color-border: #DCDFE6;

.father {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: $color-background;
    padding: 20px;
}

.son01 {
    margin: 0 auto;
    width: 80%;
    max-width: 1200px;
    background-color: $color-background;
    margin-top: 50px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.back {
    width: fit-content;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    span {
        font-size: 24px;
        color: $color-primary;
    }
}

.biaoti, .daan {
    border: 1px solid $color-border;
    margin-top: 20px;
    font-size: $fz-base;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.el-input {
    margin-top: 10px;
}

.submit-btn {
    width: 100px;
    height: 35px;
    margin-top: 40px;
    background-color: $color-primary;
    color: $color-background;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: $fz-base;

    &:hover {
        background-color: darken($color-primary, 10%);
    }
}

@media (max-width: 768px) {
    .son01 {
        width: 90%;
    }

    .back {
        flex-direction: column;
        align-items: flex-start;

        img {
            margin-right: 0;
            margin-bottom: 10px;
        }
    }
}
</style>